<template>
  <div class="leaderboard-container">
    <card-header title="排行榜" />
    <div class="sub-container">
      <div class="leaderboard-item-container">
        <div class="title">
          <text>热歌榜</text><i class="iconfont icon-arrow-right-1"></i>
        </div>
        <div class="list">
          <div
            class="leaderboard-music-container"
            v-for="(item, index) in data.topList"
            :key="index"
            @click="playMusic(item)"
          >
            <div class="cover-wrap">
              <img class="cover" :src="item.al.picUrl" alt="" />
            </div>
            <div class="info">
              <span class="song-no m-lr-24">{{ index + 1 }}</span>
              <span class="song-name">{{ item.name }}</span>
              <span class="song-singer"> - {{ item.ar[0].name }}</span>
            </div>
            <div><i class="iconfont icon-new"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import CardHeader from "../common/CardHeader/index.vue";
import { getTopList, getHotList } from "../../api/discover";
import { getSongUrl, getLyric } from "../../api/play";
import { useStore } from "vuex";

export default defineComponent({
  name: "Leaderboard",
  components: {
    CardHeader,
  },
  setup() {
    const store = useStore();
    const data = reactive({
      topList: [],
    });
    onMounted(async () => {
      const res1 = await getTopList();
      const topId = res1.data.list[3].id;
      const res2 = await getHotList(topId);
      const playlist = res2.data.playlist.tracks.slice(0, 3);
      playlist.forEach(async (song: any) => {
        console.log(song);
        const url = await getSongUrl(song.id);
        const lyric = await getLyric(song.id);
        const songInfo = song;
        songInfo.url = url.data.data[0].url;
        songInfo.lyric = lyric.data.lrc.lyric;
        data.topList.push(songInfo);
      });
    });
    const playMusic = (obj: any) => {
      store.commit("setPlayMusic", obj);
    }
    return {
      data,
      playMusic
    };
  },
});
</script>

<style scoped>
.leaderboard-container {
  background-color: var(--light-color);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.sub-container {
  padding: 0 24rem 24rem;
}

.leaderboard-item-container {
  padding: 32rem;
  box-shadow: 2rem -2rem 12rem rgba(0, 0, 0, 0.1);
  border-radius: 12rem;
}

.title {
  text-align: center;
  font-size: 34rem;
  font-weight: bold;
}

.list {
  margin-top: 32rem;
}

.item:not(:last-child) {
  margin-bottom: 24rem;
}

.leaderboard-music-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rem;
}

.cover-wrap {
  width: 100rem;
  height: 100rem;
  font-size: 0;
  border-radius: 12rem;
  overflow: hidden;
}

.cover {
  width: 100%;
  height: 100%;
}

.info {
  flex: 1;
  font-size: 28rem;
}

.song-name {
  font-weight: bold;
}

.song-singer {
  font-size: 24rem;
  color: var(--three-level);
}

.leaderboard-music-container .icon-new {
  font-size: 40rem;
  color: #0da76a;
}
</style>
